﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UIDepartamentoFrm.aspx.cs" Inherits="UILGestion.VentaAdmin.UI.UIDepartamentoFrm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>


    <script type="text/javascript" src="../../Scripts/src/redist/when.js"></script>
<script type="text/javascript" src="../../Scripts/src/core.js"></script>
<script type="text/javascript" src="../../Scripts/src/graphics.js"></script>
<script type="text/javascript" src="../../Scripts/src/mapdata.js"></script>
<script type="text/javascript" src="../../Scripts/src/areadata.js"></script>
<script type="text/javascript" src="../../Scripts/src/areacorners.js"></script>
<script type="text/javascript" src="../../Scripts/src/scale.js"></script>
<script type="text/javascript" src="../../Scripts/src/tooltip.js"></script>


  
<script type="text/javascript">
    if (window.Zepto) {
        jQuery = Zepto;
        (function ($) {
            if ($) {
                $.fn.prop = $.fn.attr;
            }
        } (jQuery));
    }

    $(document).ready(function () {

        var $statelist, $usamap, ratio,
        mapsterConfigured = function () {
            // set html settings values
            var opts = $usamap.mapster('get_options', null, true);
            if (!ratio) {
                ratio = $usamap.width() / $usamap.height();
            }

        },
        default_options =
        {
            fillOpacity: 0.5,
            render_highlight: {
                fillColor: '2aff00',
                stroke: true
            },
            render_select: {
                fillColor: 'ff000c',
                stroke: false
            },
            //render_zoom: {
            //    altImage: 'images/usa_map_huge.jpg'
            //},
            fadeInterval: 50,
            isSelectable: true,
            singleSelect: false,
            mapKey: 'state',
            mapValue: 'full',
            listKey: 'name',
            listSelectedAttribute: 'checked',
            sortList: "asc",
            onGetList: addCheckBoxes,

            onConfigured: mapsterConfigured,
            showToolTip: false,
            toolTipClose: ["area-mouseout"],
            areas: [

                { key: "Separado",
                    staticState: true
                },
                { key: "Disponible",
                    staticState: false
                }
                ]
        };


        function addCheckBoxes(items) {
            var item, selected;
            $statelist.children().remove();
            for (var i = 0; i < items.length; i++) {
                selected = items[i].isSelected();
                item = $('<div><input type="checkbox" name="' + items[i].key + '"' + (selected ? "checked" : "") + '><span class="sel" key="' + items[i].key + '">' + items[i].value + '</span></div>');

                $statelist.append(item);
            }
            $statelist.find('span.sel').unbind('click').bind('click', function (e) {
                var key = $(this).attr('key');
                $usamap.mapster('highlight', true, key);
            });
            // return the list to mapster so it can bind to it
            return $statelist.find('input[type="checkbox"]').unbind('click').click(function (e) {
                var selected = $(this).is(':checked');
                $usamap.mapster('set', selected, $(this).attr('name'));
                styleCheckbox(selected, $(this));
            });
        }
        function styleCheckbox(selected, $checkbox) {
            nowWeight = selected ? "bold" : "normal";
            $checkbox.closest('div').css("font-weight", nowWeight);
        }

        $statelist = $('#statelist');
        $usamap = $('#map');
        function bindlinks() {
            $('*').unbind();
            $("#unbind_link").bind("click", function (e) {
                e.preventDefault();
                $usamap.mapster("unbind");
                $usamap.width(720);
                bindlinks();
            });
            $("#rebind_link").bind("click", function (e) {
                e.preventDefault();
                $usamap.mapster(default_options);
            });

            $("#unbind_link_preserve").bind("click", function (e) {
                e.preventDefault();
                $usamap.mapster("unbind", true);
                bindlinks();
            });
            $("#tooltip").bind("click", function (e) {
                e.preventDefault();
                var state = !$usamap.mapster('get_options').showToolTip;
                $('#tooltip_state').text(state ? "enabled" : "disabled");
                $usamap.mapster("set_options", { showToolTip: state });
            });
            $("#show_selected").bind("click", function (e) {
                e.preventDefault();
                $('#selections').text($("#usa_image").mapster("get"));
            });
            $("#single_select").bind("click", function (e) {
                e.preventDefault();
                var state = !$usamap.mapster('get_options').singleSelect;
                $('#single_select_state').text(state ? "enabled" : "disabled");
                $usamap.mapster("set_options", { singleSelect: state });
            });
            $("#is_deselectable").bind("click", function (e) {
                e.preventDefault();
                var state = !$usamap.mapster('get_options').isDeselectable;
                $('#is_deselectable_state').text(state ? "enabled" : "disabled");
                $usamap.mapster("set_options", { isDeselectable: state });
            });
            function getSelected(sel) {
                var item = $();
                sel.each(function () {
                    if (this.selected) {
                        item = item.add(this);
                        return false;
                    }

                });
                return item;

            }

            function getFillOptions(el) {
                var new_options,
					val = getSelected($(el).find("option")).val();

                if (val > "0") {
                    new_options = {
                        altImage: 'images/usa_map_720_alt_' + val + '.jpg',
                        stroke: true
                    };
                } else {
                    new_options = {
                        altImage: null,
                        stroke: false
                    };
                }
                return new_options;
            }

            function getNewOptions() {
                var options,
                    render_highlight = getFillOptions($('#highlight_style')),
                    render_select = getFillOptions($('#select_style'));

                options = $.extend({},
                	default_options,
                	{
                	    render_select: render_select,
                	    render_highlight: render_highlight
                	});

                return options;

            }
            $("#highlight_style, #select_style").bind("change", function (e) {
                e.preventDefault();
                $statelist.children().remove();

                $usamap.mapster(getNewOptions());

            });
            $("#update").click(function (e) {
                var newOpts = {};
                function setOption(base, opt, value) {
                    if (value !== '' && value !== null) {
                        base[opt] = value;
                    }
                }
                e.preventDefault();

                newOpts.render_highlight = {};
                setOption(newOpts.render_highlight, "stroke", $('#stroke_highlight').prop("checked"));

                setOption(newOpts.render_highlight, "strokeWidth", $('#strokewidth_highlight').val());
                setOption(newOpts.render_highlight, "fillOpacity", $('#fill_highlight').val());
                setOption(newOpts.render_highlight, "strokeOpacity", $('#strokeopacity_highlight').val());

                newOpts.render_select = {};
                setOption(newOpts.render_select, "stroke", $('#stroke_select').prop("checked"));
                setOption(newOpts.render_select, "strokeWidth", $('#strokewidth_select').val());
                setOption(newOpts.render_select, "fillOpacity", $('#fill_select').val());
                setOption(newOpts.render_select, "strokeOpacity", $('#strokeopacity_select').val());

                var width = parseInt($('#img_width').val(), 10);

                if ($usamap.width() != width) {
                    $usamap.mapster('resize', width, null, 1000);
                } else {
                    $usamap.mapster('set_options', newOpts);
                }

            });

        };

        bindlinks();
        $.mapster.impl.init();
        $usamap.mapster(default_options);


    });


    // Utility functions
    // If you are copying code you probably won't need these.


    var utils = {};
    // Tells if an element is completely visible. if the 2nd parm is true, it only looks at the top.

    utils.isScrolledIntoView = function (elem, topOnly, container) {
        var useWindow = false, docViewTop, docViewBottom, elemTop, elemBottom;

        if (!container) {
            container = window;
            useWindow = true;
        }


        if (useWindow) {
            docViewTop = $(container).scrollTop();
            elemTop = elem.offset().top;
        } else {
            docViewTop = 0;
            elemTop = elem.position().top;
        }
        docViewBottom = docViewTop + $(container).height();
        elemBottom = elemTop + elem.height();


        if (topOnly) {
            return elemTop >= docViewTop && elemTop <= docViewBottom;
        } else {
            return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
        }
    };

    utils.centerOn = function ($container, $element) {
        $container.animate({
            scrollTop: $element.position().top - ($container.height() / 2)
        }, 'slow');
    };

</script>


</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>
